﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Nevia</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/blue.css" id="colors">

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Java Script
================================================== -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.flexslider.js"></script>
<script src="scripts/jquery.selectnav.js"></script>
<script src="scripts/jquery.twitter.js"></script>
<script src="scripts/jquery.modernizr.js"></script>
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.contact.js"></script>
<script src="scripts/jquery.isotope.min.js"></script>
<script src="scripts/jquery.jcarousel.js"></script>
<script src="scripts/jquery.fancybox.min.js"></script>
<script src="scripts/jquery.layerslider.min.js"></script>
<script src="scripts/jquery.shop.js"></script>
<script src="scripts/custom.js"></script>

</head>
<body>

<!-- Wrapper / Start -->
<div id="wrapper">

<!-- Header
================================================== -->
<div id="top-line"></div>

<!-- 960 Container -->
<div class="container">

	<!-- Header -->
	<header id="header">

		<!-- Logo -->
		<div class="ten columns">
			<div id="logo">
				<h1><a href="index.html"><img src="images/logo.png" alt="Nevia Premium Template" /></a></h1>
				<div id="tagline">Template Without Compromises!</div>
				<div class="clearfix"></div>
			</div>
		</div>

		<!-- Social / Contact -->
		<div class="six columns">

			<!-- Social Icons -->
			<ul class="social-icons">
				<li class="twitter"><a href="#">Twitter</a></li>
				<li class="facebook"><a href="#">Facebook</a></li>
				<li class="dribbble"><a href="#">Dribbble</a></li>
				<li class="linkedin"><a href="#">LinkedIn</a></li>
				<li class="rss"><a href="#">RSS</a></li>
			</ul>

			<div class="clearfix"></div>

			<!-- Contact Details -->
			<div class="contact-details">Contact Phone: +48 880 440 110</div>

			<div class="clearfix"></div>

			<!-- Search -->
			<nav class="top-search">
				<form action="404-page.html" method="get">
					<button class="search-btn"></button>
					<input class="search-field" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search" />
				</form>
			</nav>

		</div>
	</header>
	<!-- Header / End -->

	<div class="clearfix"></div>

</div>
<!-- 960 Container / End -->


<!-- Navigation
================================================== -->
<nav id="navigation" class="style-1">

<div class="left-corner"></div>
<div class="right-corner"></div>

<ul class="menu" id="responsive">

	<li><a href="index.html"><i class="halflings white home"></i> Home</a></li>

	<li><a href="#"><i class="halflings white file"></i> Features</a>
		<!-- Mega Menu / Start -->
		<ul class="cols3">
			<li class="col3">
				<h4>Two Lists and a Paragraph</h4>
			</li>
			<li class="col1">
				<h5>Page Layouts</h5>
				<ol>
					<li><a href="about.html">About</a></li>
					<li><a href="flexslider.html">FlexSlider</a></li>
					<li><a href="pricing-tables.html">Pricing Tables</a></li>
					<li><a href="elements.html">Elements</a></li>
				</ol>
			</li>
			<li class="col1">
				<h5>Other Pages</h5>
				<ol>
					<li><a href="faq.html">FAQ's</a></li>
					<li><a href="404-page.html">404 Page</a></li>
					<li><a href="left-sidebar.html">Left Sidebar</a></li>
					<li><a href="right-sidebar.html">Right Sidebar</a></li>
				</ol>
			</li>
			<li class="col1">
				<h5>Paragraph</h5>
				<p>This <a href="#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p>
			</li>
		</ul>
		<!-- Mega Menu / End -->
	</li>

	<li><a href="#" id="current"><i class="halflings white cog"></i> Shortcodes</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="elements.html">Elements</a></li>
			<li><a href="icons.html">Icons</a></li>
			<li><a href="pricing-tables.html">Pricing Tables</a></li>
			<li><a href="typography.html">Typography</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="#"><i class="halflings white briefcase"></i> Portfolio</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="portfolio-2.html">2 Columns</a></li>
			<li><a href="portfolio-3.html">3 Columns</a></li>
			<li><a href="portfolio-4.html">4 Columns</a></li>
			<li><a href="single-project.html">Single Project</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>
	
	<li><a href="#"><i class="halflings white shopping-cart"></i> Shop</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="shop.html">Shop</a></li>
			<li><a href="product-page.html">Product Page</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="#"><i class="halflings white pencil"></i> Blog</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="blog-large-image.html">Large Image</a></li>
			<li><a href="blog-medium-image.html">Medium Image</a></li>
			<li><a href="blog-post.html">Single Post</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="contact.html"><i class="halflings white envelope"></i> Contact</a></li>

</ul>
</nav>
<div class="clearfix"></div>


<!-- Content
================================================== -->

<div id="content">

<!-- 960 Container -->
<div class="container floated">

	<div class="sixteen floated page-title">

		<h2>Shortcodes <span>/ Icons</span></h2>

		<nav id="breadcrumbs">
			<ul>
				<li>You are here:</li>
				<li><a href="index.html">Home</a></li>
				<li>Icons</li>
			</ul>
		</nav>

	</div>

</div>
<!-- 960 Container / End -->

<!-- Page Content -->
<div class="page-content">

<div class="container">
	<div class="sixteen columns">
		<div class="notification notice closeable" style="margin: 0 0 40px 0;">
			<p>Nevia includes the popular Font Awesome & Glyphicons sets with over 360 Icons!</p>
		</div>
	</div>

</div>


<!-- Web Apps Icons -->
<div class="container">
	<div class="sixteen columns">
		<h3 class="margin-reset">Web Application Icons</h3>
	</div>

	<div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-adjust"></i> icon-adjust</li>
	  <li><i class="icon-asterisk"></i> icon-asterisk</li>
	  <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
	  <li><i class="icon-bar-chart"></i> icon-bar-chart</li>
	  <li><i class="icon-barcode"></i> icon-barcode</li>
	  <li><i class="icon-beaker"></i> icon-beaker</li>
	  <li><i class="icon-bell"></i> icon-bell</li>
	  <li><i class="icon-bolt"></i> icon-bolt</li>
	  <li><i class="icon-book"></i> icon-book</li>
	  <li><i class="icon-bookmark"></i> icon-bookmark</li>
	  <li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li>
	  <li><i class="icon-briefcase"></i> icon-briefcase</li>
	  <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
	  <li><i class="icon-calendar"></i> icon-calendar</li>
	  <li><i class="icon-camera"></i> icon-camera</li>
	  <li><i class="icon-camera-retro"></i> icon-camera-retro</li>
	  <li><i class="icon-certificate"></i> icon-certificate</li>
	  <li><i class="icon-check"></i> icon-check</li>
	  <li><i class="icon-check-empty"></i> icon-check-empty</li>
	  <li><i class="icon-cloud"></i> icon-cloud</li>
	  <li><i class="icon-cog"></i> icon-cog</li>
	  <li><i class="icon-cogs"></i> icon-cogs</li>
	  <li><i class="icon-comment"></i> icon-comment</li>
	  <li><i class="icon-comment-alt"></i> icon-comment-alt</li>
	  <li><i class="icon-comments"></i> icon-comments</li>
	  <li><i class="icon-comments-alt"></i> icon-comments-alt</li>
	  <li><i class="icon-credit-card"></i> icon-credit-card</li>
	  <li><i class="icon-dashboard"></i> icon-dashboard</li>
	  <li><i class="icon-download"></i> icon-download</li>
	  <li><i class="icon-download-alt"></i> icon-download-alt</li>
	  <li><i class="icon-edit"></i> icon-edit</li>
	  <li><i class="icon-envelope"></i> icon-envelope</li>
	  <li><i class="icon-envelope-alt"></i> icon-envelope-alt</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
	  <li><i class="icon-external-link"></i> icon-external-link</li>
	  <li><i class="icon-eye-close"></i> icon-eye-close</li>
	  <li><i class="icon-eye-open"></i> icon-eye-open</li>
	  <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
	  <li><i class="icon-film"></i> icon-film</li>
	  <li><i class="icon-filter"></i> icon-filter</li>
	  <li><i class="icon-fire"></i> icon-fire</li>
	  <li><i class="icon-flag"></i> icon-flag</li>
	  <li><i class="icon-folder-close"></i> icon-folder-close</li>
	  <li><i class="icon-folder-open"></i> icon-folder-open</li>
	  <li><i class="icon-gift"></i> icon-gift</li>
	  <li><i class="icon-glass"></i> icon-glass</li>
	  <li><i class="icon-globe"></i> icon-globe</li>
	  <li><i class="icon-group"></i> icon-group</li>
	  <li><i class="icon-hdd"></i> icon-hdd</li>
	  <li><i class="icon-headphones"></i> icon-headphones</li>
	  <li><i class="icon-heart"></i> icon-heart</li>
	  <li><i class="icon-heart-empty"></i> icon-heart-empty</li>
	  <li><i class="icon-home"></i> icon-home</li>
	  <li><i class="icon-inbox"></i> icon-inbox</li>
	  <li><i class="icon-info-sign"></i> icon-info-sign</li>
	  <li><i class="icon-key"></i> icon-key</li>
	  <li><i class="icon-leaf"></i> icon-leaf</li>
	  <li><i class="icon-legal"></i> icon-legal</li>
	  <li><i class="icon-lemon"></i> icon-lemon</li>
	  <li><i class="icon-lock"></i> icon-lock</li>
	  <li><i class="icon-unlock"></i> icon-unlock</li>
	  <li><i class="icon-magic"></i> icon-magic</li>
	  <li><i class="icon-magnet"></i> icon-magnet</li>
	  <li><i class="icon-map-marker"></i> icon-map-marker</li>
	  <li><i class="icon-minus"></i> icon-minus</li>
	  <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-money"></i> icon-money</li>
	  <li><i class="icon-move"></i> icon-move</li>
	  <li><i class="icon-music"></i> icon-music</li>
	  <li><i class="icon-off"></i> icon-off</li>
	  <li><i class="icon-ok"></i> icon-ok</li>
	  <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
	  <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
	  <li><i class="icon-pencil"></i> icon-pencil</li>
	  <li><i class="icon-picture"></i> icon-picture</li>
	  <li><i class="icon-plane"></i> icon-plane</li>
	  <li><i class="icon-plus"></i> icon-plus</li>
	  <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
	  <li><i class="icon-print"></i> icon-print</li>
	  <li><i class="icon-pushpin"></i> icon-pushpin</li>
	  <li><i class="icon-qrcode"></i> icon-qrcode</li>
	  <li><i class="icon-question-sign"></i> icon-question-sign</li>
	  <li><i class="icon-random"></i> icon-random</li>
	  <li><i class="icon-refresh"></i> icon-refresh</li>
	  <li><i class="icon-remove"></i> icon-remove</li>
	  <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
	  <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
	  <li><i class="icon-reorder"></i> icon-reorder</li>
	  <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
	  <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
	  <li><i class="icon-retweet"></i> icon-retweet</li>
	  <li><i class="icon-road"></i> icon-road</li>
	  <li><i class="icon-rss"></i> icon-rss</li>
	  <li><i class="icon-screenshot"></i> icon-screenshot</li>
	  <li><i class="icon-search"></i> icon-search</li>
	  <li><i class="icon-share"></i> icon-share</li>
	  <li><i class="icon-share-alt"></i> icon-share-alt</li>
	  <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-signal"></i> icon-signal</li>
	  <li><i class="icon-signin"></i> icon-signin</li>
	  <li><i class="icon-signout"></i> icon-signout</li>
	  <li><i class="icon-sitemap"></i> icon-sitemap</li>
	  <li><i class="icon-sort"></i> icon-sort</li>
	  <li><i class="icon-sort-down"></i> icon-sort-down</li>
	  <li><i class="icon-sort-up"></i> icon-sort-up</li>
	  <li><i class="icon-star"></i> icon-star</li>
	  <li><i class="icon-star-empty"></i> icon-star-empty</li>
	  <li><i class="icon-star-half"></i> icon-star-half</li>
	  <li><i class="icon-tag"></i> icon-tag</li>
	  <li><i class="icon-tags"></i> icon-tags</li>
	  <li><i class="icon-tasks"></i> icon-tasks</li>
	  <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
	  <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
	  <li><i class="icon-time"></i> icon-time</li>
	  <li><i class="icon-tint"></i> icon-tint</li>
	  <li><i class="icon-trash"></i> icon-trash</li>
	  <li><i class="icon-trophy"></i> icon-trophy</li>
	  <li><i class="icon-truck"></i> icon-truck</li>
	  <li><i class="icon-umbrella"></i> icon-umbrella</li>
	  <li><i class="icon-upload"></i> icon-upload</li>
	  <li><i class="icon-upload-alt"></i> icon-upload-alt</li>
	  <li><i class="icon-user"></i> icon-user</li>
	  <li><i class="icon-user-md"></i> icon-user-md</li>
	  <li><i class="icon-volume-off"></i> icon-volume-off</li>
	  <li><i class="icon-volume-down"></i> icon-volume-down</li>
	  <li><i class="icon-volume-up"></i> icon-volume-up</li>
	  <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
	  <li><i class="icon-wrench"></i> icon-wrench</li>
	  <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
	  <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
	</ul>
  </div>
  </div>
<!-- Web Apps Icons / End -->


<!-- Divider -->
<div class="line" style="margin-top: 20px; margin-bottom: 42px;"></div>


<!-- Text Editor Icons -->
<div class="container">

	<div class="sixteen columns">
		<h3 class="margin-reset">Text Editor Icons</h3>
	</div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-file"></i> icon-file</li>
	  <li><i class="icon-cut"></i> icon-cut</li>
	  <li><i class="icon-copy"></i> icon-copy</li>
	  <li><i class="icon-paste"></i> icon-paste</li>
	  <li><i class="icon-save"></i> icon-save</li>
	  <li><i class="icon-undo"></i> icon-undo</li>
	  <li><i class="icon-repeat"></i> icon-repeat</li>
	  <li><i class="icon-paper-clip"></i> icon-paper-clip</li>
	</ul>
  </div>
  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-text-height"></i> icon-text-height</li>
	  <li><i class="icon-text-width"></i> icon-text-width</li>
	  <li><i class="icon-align-left"></i> icon-align-left</li>
	  <li><i class="icon-align-center"></i> icon-align-center</li>
	  <li><i class="icon-align-right"></i> icon-align-right</li>
	  <li><i class="icon-align-justify"></i> icon-align-justify</li>
	  <li><i class="icon-indent-left"></i> icon-indent-left</li>
	  <li><i class="icon-indent-right"></i> icon-indent-right</li>
	</ul>
  </div>
  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-font"></i> icon-font</li>
	  <li><i class="icon-bold"></i> icon-bold</li>
	  <li><i class="icon-italic"></i> icon-italic</li>
	  <li><i class="icon-strikethrough"></i> icon-strikethrough</li>
	  <li><i class="icon-underline"></i> icon-underline</li>
	  <li><i class="icon-link"></i> icon-link</li>
	  <li><i class="icon-columns"></i> icon-columns</li>
	  <li><i class="icon-table"></i> icon-table</li>
	</ul>
  </div>
  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-th-large"></i> icon-th-large</li>
	  <li><i class="icon-th"></i> icon-th</li>
	  <li><i class="icon-th-list"></i> icon-th-list</li>
	  <li><i class="icon-list"></i> icon-list</li>
	  <li><i class="icon-list-ol"></i> icon-list-ol</li>
	  <li><i class="icon-list-ul"></i> icon-list-ul</li>
	  <li><i class="icon-list-alt"></i> icon-list-alt</li>
	</ul>
  </div>
</div>
<!-- Text Editor Icons / End -->


<!-- Divider -->
<div class="line" style="margin-top: 20px; margin-bottom: 42px;"></div>


<!-- Directional Icons -->
<div class="container">

	<div class="sixteen columns">
		<h3 class="margin-reset">Directional Icons</h3>
	</div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
	  <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
	  <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
	  <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
	  <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
	  <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
	  <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
	  <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
	  <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-caret-down"></i> icon-caret-down</li>
	  <li><i class="icon-caret-left"></i> icon-caret-left</li>
	  <li><i class="icon-caret-right"></i> icon-caret-right</li>
	  <li><i class="icon-caret-up"></i> icon-caret-up</li>
	  <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-hand-down"></i> icon-hand-down</li>
	  <li><i class="icon-hand-left"></i> icon-hand-left</li>
	  <li><i class="icon-hand-right"></i> icon-hand-right</li>
	  <li><i class="icon-hand-up"></i> icon-hand-up</li>
	  <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
	</ul>
  </div>
</div>
<!-- Directional Icons / End -->


<!-- Divider -->
<div class="line" style="margin-top: 20px; margin-bottom: 42px;"></div>


<!-- Video Player Icons -->
<div class="container">

	<div class="sixteen columns">
		<h3 class="margin-reset">Video Player Icons</h3>
	</div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-play-circle"></i> icon-play-circle</li>
	  <li><i class="icon-play"></i> icon-play</li>
	  <li><i class="icon-pause"></i> icon-pause</li>
	  <li><i class="icon-stop"></i> icon-stop</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-step-backward"></i> icon-step-backward</li>
	  <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
	  <li><i class="icon-backward"></i> icon-backward</li>
	  <li><i class="icon-forward"></i> icon-forward</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
	  <li><i class="icon-step-forward"></i> icon-step-forward</li>
	  <li><i class="icon-eject"></i> icon-eject</li>
	</ul>
  </div>

  <div class="four columns">
	<ul class="the-icons">
	  <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
	  <li><i class="icon-resize-full"></i> icon-resize-full</li>
	  <li><i class="icon-resize-small"></i> icon-resize-small</li>
	</ul>
  </div>
</div>


<!-- Divider -->
<div class="line" style="margin-top: 20px; margin-bottom: 42px;"></div>


<!-- Glyphicons -->
<div class="container">
	<div class="sixteen columns">
		<h3 class="margin-reset">Glyphicons Halflings</h3>
	</div>
</div>

<div class="container">
	<div class="four columns">
		<ul class="glyphicons">
			<li><i class="halflings glass"></i>glass</li>
			<li><i class="halflings music"></i>music</li>
			<li><i class="halflings search"></i>search</li>
			<li><i class="halflings envelope"></i>envelope</li>
			<li><i class="halflings heart"></i>heart</li>
			<li><i class="halflings star"></i>star</li>
			<li><i class="halflings star-empty"></i>star-empty</li>
			<li><i class="halflings user"></i>user</li>
			<li><i class="halflings film"></i>film</li>
			<li><i class="halflings th-large"></i>th-large</li>
			<li><i class="halflings th"></i>th</li>
			<li><i class="halflings th-list"></i>th-list</li>
			<li><i class="halflings ok"></i>ok</li>
			<li><i class="halflings remove"></i>remove</li>
			<li><i class="halflings zoom-in"></i>zoom-in</li>
			<li><i class="halflings zoom-out"></i>zoom-out</li>
			<li><i class="halflings off"></i>off</li>
			<li><i class="halflings signal"></i>signal</li>
			<li><i class="halflings cog"></i>cog</li>
			<li><i class="halflings trash"></i>trash</li>
			<li><i class="halflings home"></i>home</li>
			<li><i class="halflings file"></i>file</li>
			<li><i class="halflings time"></i>time</li>
			<li><i class="halflings road"></i>road</li>
			<li><i class="halflings download-alt"></i>download-alt</li>
			<li><i class="halflings download"></i>download</li>
			<li><i class="halflings upload"></i>upload</li>
			<li><i class="halflings inbox"></i>inbox</li>
			<li><i class="halflings play-circle"></i>play-circle</li>
			<li><i class="halflings repeat"></i>repeat</li>
			<li><i class="halflings refresh"></i>refresh</li>
			<li><i class="halflings list-alt"></i>list-alt</li>
			<li><i class="halflings lock"></i>lock</li>
			<li><i class="halflings flag"></i>flag</li>
			<li><i class="halflings headphones"></i>headphones</li>
			<li><i class="halflings volume-off"></i>volume-off</li>
			<li><i class="halflings volume-down"></i>volume-down</li>
			<li><i class="halflings volume-up"></i>volume-up</li>
			<li><i class="halflings qrcode"></i>qrcode</li>
			<li><i class="halflings barcode"></i>barcode</li>
		</ul>
	</div>

	<div class="four columns">
		<ul class="glyphicons">
			<li><i class="halflings tag"></i>tag</li>
			<li><i class="halflings tags"></i>tags</li>
			<li><i class="halflings book"></i>book</li>
			<li><i class="halflings bookmark"></i>bookmark</li>
			<li><i class="halflings print"></i>print</li>
			<li><i class="halflings camera"></i>camera</li>
			<li><i class="halflings font"></i>font</li>
			<li><i class="halflings bold"></i>bold</li>
			<li><i class="halflings italic"></i>italic</li>
			<li><i class="halflings text-height"></i>text-height</li>
			<li><i class="halflings text-width"></i>text-width</li>
			<li><i class="halflings align-left"></i>align-left</li>
			<li><i class="halflings align-center"></i>align-center</li>
			<li><i class="halflings align-right"></i>align-right</li>
			<li><i class="halflings align-justify"></i>align-justify</li>
			<li><i class="halflings list"></i>list</li>
			<li><i class="halflings indent-left"></i>indent-left</li>
			<li><i class="halflings indent-right"></i>indent-right</li>
			<li><i class="halflings facetime-video"></i>facetime-video</li>
			<li><i class="halflings picture"></i>picture</li>
			<li><i class="halflings pencil"></i>pencil</li>
			<li><i class="halflings map-marker"></i>map-marker</li>
			<li><i class="halflings adjust"></i>adjust</li>
			<li><i class="halflings tint"></i>tint</li>
			<li><i class="halflings edit"></i>edit</li>
			<li><i class="halflings share"></i>share</li>
			<li><i class="halflings check"></i>check</li>
			<li><i class="halflings move"></i>move</li>
			<li><i class="halflings step-backward"></i>step-backward</li>
			<li><i class="halflings fast-backward"></i>fast-backward</li>
			<li><i class="halflings backward"></i>backward</li>
			<li><i class="halflings play"></i>play</li>
			<li><i class="halflings pause"></i>pause</li>
			<li><i class="halflings stop"></i>stop</li>
			<li><i class="halflings forward"></i>forward</li>
			<li><i class="halflings fast-forward"></i>fast-forward</li>
			<li><i class="halflings step-forward"></i>step-forward</li>
			<li><i class="halflings eject"></i>eject</li>
			<li><i class="halflings chevron-left"></i>chevron-left</li>
			<li><i class="halflings chevron-right"></i>chevron-right</li>
		</ul>
	</div>

	<div class="four columns">
		<ul class="glyphicons">
			<li><i class="halflings plus-sign"></i>plus-sign</li>
			<li><i class="halflings minus-sign"></i>minus-sign</li>
			<li><i class="halflings remove-sign"></i>remove-sign</li>
			<li><i class="halflings ok-sign"></i>ok-sign</li>
			<li><i class="halflings question-sign"></i>question-sign</li>
			<li><i class="halflings info-sign"></i>info-sign</li>
			<li><i class="halflings screenshot"></i>screenshot</li>
			<li><i class="halflings remove-circle"></i>remove-circle</li>
			<li><i class="halflings ok-circle"></i>ok-circle</li>
			<li><i class="halflings ban-circle"></i>ban-circle</li>
			<li><i class="halflings arrow-left"></i>arrow-left</li>
			<li><i class="halflings arrow-right"></i>arrow-right</li>
			<li><i class="halflings arrow-up"></i>arrow-up</li>
			<li><i class="halflings arrow-down"></i>arrow-down</li>
			<li><i class="halflings share-alt"></i>share-alt</li>
			<li><i class="halflings resize-full"></i>resize-full</li>
			<li><i class="halflings resize-small"></i>resize-small</li>
			<li><i class="halflings plus"></i>plus</li>
			<li><i class="halflings minus"></i>minus</li>
			<li><i class="halflings asterisk"></i>asterisk</li>
			<li><i class="halflings exclamation-sign"></i>exclamation-sign</li>
			<li><i class="halflings gift"></i>gift</li>
			<li><i class="halflings leaf"></i>leaf</li>
			<li><i class="halflings fire"></i>fire</li>
			<li><i class="halflings eye-open"></i>eye-open</li>
			<li><i class="halflings eye-close"></i>eye-close</li>
			<li><i class="halflings warning-sign"></i>warning-sign</li>
			<li><i class="halflings plane"></i>plane</li>
			<li><i class="halflings calendar"></i>calendar</li>
			<li><i class="halflings random"></i>random</li>
			<li><i class="halflings comments"></i>comments</li>
			<li><i class="halflings magnet"></i>magnet</li>
			<li><i class="halflings chevron-up"></i>chevron-up</li>
			<li><i class="halflings chevron-down"></i>chevron-down</li>
			<li><i class="halflings retweet"></i>retweet</li>
			<li><i class="halflings shopping-cart"></i>shopping-cart</li>
			<li><i class="halflings folder-close"></i>folder-close</li>
			<li><i class="halflings folder-open"></i>folder-open</li>
			<li><i class="halflings resize-vertical"></i>resize-vertical</li>
			<li><i class="halflings resize-horizontal"></i>resize-horizontal</li>
		</ul>
	</div>

	<div class="four columns">
		<ul class="glyphicons">
			<li><i class="halflings hdd"></i>hdd</li>
			<li><i class="halflings bullhorn"></i>bullhorn</li>
			<li><i class="halflings bell"></i>bell</li>
			<li><i class="halflings certificate"></i>certificate</li>
			<li><i class="halflings thumbs-up"></i>thumbs-up</li>
			<li><i class="halflings thumbs-down"></i>thumbs-down</li>
			<li><i class="halflings hand-right"></i>hand-right</li>
			<li><i class="halflings hand-left"></i>hand-left</li>
			<li><i class="halflings hand-top"></i>hand-top</li>
			<li><i class="halflings hand-down"></i>hand-down</li>
			<li><i class="halflings circle-arrow-right"></i>circle-arrow-right</li>
			<li><i class="halflings circle-arrow-left"></i>circle-arrow-left</li>
			<li><i class="halflings circle-arrow-top"></i>circle-arrow-top</li>
			<li><i class="halflings circle-arrow-down"></i>circle-arrow-down</li>
			<li><i class="halflings globe"></i>globe</li>
			<li><i class="halflings wrench"></i>wrench</li>
			<li><i class="halflings tasks"></i>tasks</li>
			<li><i class="halflings filter"></i>filter</li>
			<li><i class="halflings briefcase"></i>briefcase</li>
			<li><i class="halflings fullscreen"></i>fullscreen</li>
			<li><i class="halflings dashboard"></i>dashboard</li>
			<li><i class="halflings paperclip"></i>paperclip</li>
			<li><i class="halflings heart-empty"></i>heart-empty</li>
			<li><i class="halflings link"></i>link</li>
			<li><i class="halflings phone"></i>phone</li>
			<li><i class="halflings pushpin"></i>pushpin</li>
			<li><i class="halflings euro"></i>euro</li>
			<li><i class="halflings usd"></i>usd</li>
			<li><i class="halflings gbp"></i>gbp</li>
			<li><i class="halflings sort"></i>sort</li>
			<li><i class="halflings sort-by-alphabet"></i>sort-by-alphabet</li>
			<li><i class="halflings sort-by-alphabet-alt"></i>sort-by-alphabet-alt</li>
			<li><i class="halflings sort-by-order"></i>sort-by-order</li>
			<li><i class="halflings sort-by-order-alt"></i>sort-by-order-alt</li>
			<li><i class="halflings sort-by-attributes"></i>sort-by-attributes</li>
			<li><i class="halflings sort-by-attributes-alt"></i>sort-by-attributes-alt</li>
			<li><i class="halflings unchecked"></i>unchecked</li>
			<li><i class="halflings expand"></i>expand</li>
			<li><i class="halflings collapse"></i>collapse</li>
			<li><i class="halflings collapse-top"></i>collapse-top</li>
		</ul>
	</div>
</div>
<!-- Glyphicons / End -->

</div>
<!-- Page Content / End -->

</div>
<!-- Content / End -->

</div>
<!-- Wrapper / End -->


<!-- Footer
================================================== -->

<!-- Footer / Start -->
<footer id="footer">
	<!-- 960 Container -->
	<div class="container">

		<!-- About -->
		<div class="four columns">
			<img id="logo-footer" src="images/logo-footer.png" alt="" />
			<p>Morbi gravida imperdiet rutrum fusce mattis, lectus consequat vestibulum, duinibh fermentum ligula.</p>
		</div>

		<!-- Contact Details -->
		<div class="four columns">
			<h4>Contact Details</h4>
			<ul class="contact-details-alt">
				<li><i class="halflings white map-marker"></i> <p><strong>Address:</strong> 123 Seward Street, Oklahoma City, USA</p></li>
				<li><i class="halflings white user"></i> <p><strong>Phone:</strong> +48 880 440 110</p></li>
				<li><i class="halflings white envelope"></i> <p><strong>Email:</strong> <a href="#">mail@example.com</a></p></li>
			</ul>
		</div>

		<!-- Photo Stream -->
		<div class="four columns">
			<h4>Photo Stream</h4>
			<div class="flickr-widget">
				<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=72179079@N00"></script>
				<div class="clearfix"></div>
			</div>
		</div>

		<!-- Twitter -->
		<div class="four columns">
			<h4>Twitter</h4>
			<ul id="twitter"></ul>
				<script type="text/javascript">
					jQuery(document).ready(function($){
					$.getJSON('http://api.twitter.com/1/statuses/user_timeline/vasterad.json?count=1&callback=?', function(tweets){
					$("#twitter").html(tz_format_twitter(tweets));
					}); });
				</script>
			<div class="clearfix"></div>
		</div>

	</div>
	<!-- 960 Container / End -->

</footer>
<!-- Footer / End -->


<!-- Footer Bottom / Start  -->
<footer id="footer-bottom">

	<!-- 960 Container -->
	<div class="container">

		<!-- Copyrights -->
		<div class="eight columns">
			<div class="copyright">
				© Copyright 2013 by <a href="#">Nevia</a>. All Rights Reserved.
			</div>
		</div>

		<!-- Menu -->
		<div class="eight columns">
			<nav id="sub-menu">
				<ul>
					<li><a href="#">FAQ's</a></li>
					<li><a href="#">Sitemap</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</div>

	</div>
	<!-- 960 Container / End -->

</footer>
<!-- Footer Bottom / End -->


<!-- Style Switcher
================================================== -->
<link rel="stylesheet" href="css/switcher.css">
<script src="scripts/switcher.js"></script>

<section id="style-switcher">
	<h2>Style Switcher <a href="#"></a></h2>
	<div>
	<h3>Predefined Colors</h3>
		<ul class="colors" id="color1">
			<li><a href="#" class="blue" title="Blue"></a></li>
			<li><a href="#" class="green" title="Green"></a></li>
			<li><a href="#" class="orange" title="Orange"></a></li>
			<li><a href="#" class="navy" title="Navy"></a></li>
			<li><a href="#" class="yellow" title="Yellow"></a></li>
			<li><a href="#" class="peach" title="Peach"></a></li>
			<li><a href="#" class="beige" title="Beige"></a></li>
			<li><a href="#" class="purple" title="Purple"></a></li>
			<li><a href="#" class="red" title="Red"></a></li>
			<li><a href="#" class="pink" title="Pink"></a></li>
			<li><a href="#" class="celadon" title="Celadon"></a></li>
			<li><a href="#" class="brown" title="Brown"></a></li>
			<li><a href="#" class="cherry" title="Cherry"></a></li>
			<li><a href="#" class="gray" title="Gray"></a></li>
			<li><a href="#" class="dark" title="Dark"></a></li>
			<li><a href="#" class="cyan" title="Cyan"></a></li>
			<li><a href="#" class="olive" title="Olive"></a></li>
			<li><a href="#" class="dirty-green" title="Dirty Green"></a></li>
		</ul>

	<h3>Menu Style</h3>
	<select id="menu-style">
		<option value="1">Style 1</option>
		<option value="2">Style 2</option>
	</select>

	<h3>Background Image</h3>
		 <ul class="colors bg" id="bg">
			<li><a href="#" class="bg1"></a></li>
			<li><a href="#" class="bg2"></a></li>
			<li><a href="#" class="bg3"></a></li>
			<li><a href="#" class="bg4"></a></li>
			<li><a href="#" class="bg5"></a></li>
			<li><a href="#" class="bg6"></a></li>
			<li><a href="#" class="bg7"></a></li>
			<li><a href="#" class="bg8"></a></li>
			<li><a href="#" class="bg9"></a></li>
			<li><a href="#" class="bg10"></a></li>
			<li><a href="#" class="bg11"></a></li>
			<li><a href="#" class="bg12"></a></li>
			<li><a href="#" class="bg13"></a></li>
			<li><a href="#" class="bg14"></a></li>
			<li><a href="#" class="bg15"></a></li>
			<li><a href="#" class="bg16"></a></li>
			<li><a href="#" class="bg17"></a></li>
			<li><a href="#" class="bg18"></a></li>
		</ul>
	</div>

	<div id="reset"><a href="#" class="button color blue">Reset</a></div>

</section>
<!-- Style Switcher / End -->


</body>
</html>